<template>
  <view class="flex-box news-item-box" @click="goDetail()">
    <image class="news-cover-img" :src="news.coverUrl" mode="aspectFill" />
    <view class="info">
      <view class="news-title">{{news.title}}</view>
      <view class="news-info">
        <view class="news-time">
          <img class="icon" src="/static/icon/icon-date.png" />
          {{news.createTime}}
        </view>
        <view class="news-read-count">{{viewCount}}人浏览过</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'NewsItem',
  props: {
    news: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      viewCount: 0
    }
  },
  methods: {
    // 查看新闻详情
    goDetail() {
      uni.navigateTo({
        url: '../news/news-detail?id=' + this.news.id + '&type=1'
      })
      setTimeout(() => {
        this.viewCount = this.viewCount + 1
      }, 200)
    }
  },
  created () {
    this.viewCount = this.news.hits
  }
}
</script>

<style lang="less">
.news-item-box {
  width: calc('~100% - 80upx');
  height: 180upx;
  padding: 32upx 40upx;
  border-bottom: 1px solid #eeeeee;

  .news-cover-img {
    min-width: 250upx;
    max-width: 250upx;
    height: 180upx;
    margin-right: 20upx;
  }

  .info {
    flex: auto;
    height: 180upx;
    display: flex;
    flex-direction: column;

    .news-title {
      font-size: 30upx;
      font-weight: bold;
      color: #333333;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-height: 40upx;
      max-height: 80upx;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .news-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;

      .news-time {
        font-size: 24upx;
        font-weight: 400;
        color: #888888;
        display: flex;
        align-items: center;

        .icon {
          width: 28upx;
          height: 26upx;
          margin-right: 10upx;
        }
      }

      .news-read-count {
        margin-top: 6upx;
        font-size: 12px;
        color: #888888;
      }
    }
  }
}
</style>